<template>
    <z-upload v-if="currData && currField" v-model="currData[currField]" v-bind="renderProps"
        v-on="renderEvents"></z-upload>
</template>

<script>
export default {
    props: {
        renderOpts: {
            type: Object,
            default: () => ({})
        },
        params: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            // 当前数据 表单数据
            currData: null,
            // 当前字段
            currField: '',
        }
    },
    computed: {
        // 渲染属性 props
        renderProps() {
            const { props } = this.renderOpts
            const { readonly, disabled } = this.params
            return Object.assign({}, {
                readonly,
                disabled,
                ...props,

            })
        },
        // 渲染事件 events
        renderEvents() {
            const { events } = this.renderOpts
            return Object.assign({}, events)
        },
    },
    watch: {
        // 监听params deep
        params: {
            immediate: true,
            handler(newValue, oldValue) {
                this.load()
            },
        },
    },
    methods: {
        /**
         * 加载数据和字段
         * 
         * 该方法用于从组件的参数中提取数据和字段信息，并将其赋值给组件的当前数据和当前字段属性
         * 这样做是为了在组件内部使用这些数据进行进一步的处理或展示
         */
        load() {
            // 获取组件的参数
            const params = this.params
            // 从参数中解构出数据和字段
            const { data, field } = params
            // 将数据和字段分别赋值给组件的当前数据和当前字段属性
            this.currData = data
            this.currField = field
        }
    },
}
</script>

<style lang="scss" scoped></style>